<template>
  <div>
    <ul style="padding: 0">
      <li
        v-for="(item, i) in articleData.articleContent"
        :key="i"
        class="infinite-list-item"
      >
        <div>
          <div class="block">
            <el-avatar
              :size="50"
              :src="item.adminVo.userFace"
              style="float: left"
            ></el-avatar>
          </div>
          <div style="padding-top: 15px; padding-left: 61px">
            <span style="font-size: 16px; font-weight: bold">{{
              item.adminVo.name
            }}</span>
          </div>
        </div>
        <div v-html="item.content" class="collapse"></div>
        <div class="sc-pl-dz">
          <i class="el-icon-platform-eleme"> 收藏</i>
          <i class="el-icon-chat-dot-round" @click="commentMethod(item)">
            评论 {{ formatValue(item.comment) }}</i
          >
          <i class="el-icon-eleme" @click="thumbsUp(item)">
            点赞 {{ formatValue(item.thumbup) }}</i
          >
        </div>
        <!-- <evaluatIng ref="bookEvaluatIng"></evaluatIng> -->
        <div class="evaluatIng">
          <div>
            <el-input placeholder="发布您的评论" v-model="input"></el-input>
            <div class="release">
              <span>同时发布</span>
              <el-button type="warning" round>评论</el-button>
            </div>
          </div>
          <div v-for="(itemData, i) in item.commentData" :key="i">
            {{ itemData.content }}
          </div>
        </div>
      </li>
    </ul>
    <p
      v-if="articleData.loading"
      v-loading="articleData.loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      style="height: 40px"
    ></p>
    <p v-if="articleData.noMore" style="text-align: center">没有更多了...</p>
  </div>
</template>

<script>
import eventBus from "../../eventBus";
import { mapState } from "vuex";
export default {
  name: "articleContent",
  data() {
    return {
      articleData: {
        articleContent: [],
        count: 0,
        size: 10,
        loading: false,
        noMore: false,
      },
      srcList: [],
      bookId: "",
      input: "",
      userData: JSON.parse(sessionStorage.getItem("user")),
    };
  },
  computed: {
    ...mapState({
      timeServiceApi: (state) => state.timeServiceApi,
    }),
  },
  mounted() {
    //获取兄弟组件的数据
    eventBus.$on("getArticleData", (data) => {
      this.articleData = data;
    }),
      eventBus.$on("insertArticle", (data) => {
        this.unshift(data);
      });
  },
  methods: {
    // 获取评论数据
    commentMethod(data) {
      let obj = {
        articleId: data.id,
        current: 1,
        size: 10,
      };
      this.getRequest(
        this.timeServiceApi + "/comment/findByarticleId/",
        obj
      ).then((res) => {
        if (res) {
          data.commentData = res.data.list;
          console.log(data);
          //强制刷新，触发渲染
          this.$forceUpdate();
        }
      });
    },
    unshift(data) {
      this.articleData.articleContent.unshift(data);
    },
    formatValue(data) {
      if (data > 10000) {
        data = (data / 10000).toFixed(2) + " W";
      }
      if (data == 0) {
        data = null;
      }
      return data;
    },
    /**
     * 点赞接口
     */
    thumbsUp(item) {
      let obj = {
        authorId: item.adminVo.username,
        userName: this.userData.username,
        articleId: item.id,
      };
      console.log(item);
      if (item.thumbsUpState) {
        item.thumbsUpState = false;
        item.thumbup--;
      } else {
        item.thumbsUpState = true;
        item.thumbup++;
      }
      this.getRequest(this.timeServiceApi + "/article/thumbsUp/", obj).then(
        (res) => {}
      );
    },
  },
};
</script>

<style scoped>
.collapse {
  max-height: 500px;
  overflow: hidden;
  width: 100%;
  margin-bottom: 15px;
  padding-top: 15px;
}

.infinite-list-item {
  margin: 15px 0px;
  background: #f5f5f5;
  padding: 10px;
  overflow: hidden;
}

.sc-pl-dz {
  font-size: 15px;
  display: block;
  margin-bottom: 10px;
}

.sc-pl-dz i {
  text-align: center;
  width: 180px;
  margin: 0px 14px;
}

.sc-pl-dz i:hover {
  color: coral;
}

li {
  list-style: none;
}
.release {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}
::v-deep .el-input__inner {
  border-color: rgb(255, 165, 0);
}
::v-deep .el-input__inner:hover {
  border-color: rgb(255, 165, 0);
}
::v-deep .el-input__inner:focus {
  border-color: rgb(255, 165, 0);
}
</style>
